<template>
  <div>
    <el-card>
      <el-button type="primary" @click="addPermission">添加</el-button>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
      >
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="permission_name" label="权限名" sortable />
        <el-table-column prop="hierarchy" label="级别" sortable />
        <el-table-column prop="address" label="操作" sortable>
          <el-button type="primary">编辑</el-button>
          <el-button type="danger">删除</el-button>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogVisible" title="Tips" width="500">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="父级权限名">
          <el-input
            v-model="ruleForm.role_name"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="ConfirmAdd"> Confirm </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reqPermissionsList } from "@/api/roles/index";
import { ResPermissionsList } from "@/api/roles/model";
import { buildTree } from "@/utils/buildTree";
const tableData = ref<ResPermissionsList[]>([]);
const dialogVisible = ref(false);
const ruleForm = ref({
  role_name: "",
  permission_ids: "",
});

// 添加权限
const addPermission = () => {
  dialogVisible.value = true;
};

const ConfirmAdd = () => {
  dialogVisible.value = false;
};
const getPermissionsList = async () => {
  let result = await reqPermissionsList();
  tableData.value = buildTree(result);
  tableData.value.map((item) => {
    item.hierarchy = "父级路由权限";
    if (item.children) {
      item.children.forEach((childrenitem: ResPermissionsList) => {
        childrenitem.hierarchy = "子级路由权限";
      });
    }
  });
};
onMounted(() => {
  getPermissionsList();
});
</script>

<style scoped lang="scss"></style>
